{% extends 'base/base.html'%}
<!-- 标题头 -->
{% block title %}
<title>给点知识-登录页面</title>
{% endblock title %}
<!-- 面包屑 -->
{% block breadcrumb %}
<li class="breadcrumb-item"><a href="{% url 'index'%}">Home</a></li>
<li class="breadcrumb-item"><a href="#">登录</a></li>
{% endblock breadcrumb %}

<!-- 内容 -->
{% block content %}
<div class='row'>
    <div class="col-sm">
    </div>
    <div class="col-sm">
      <form>
        {% csrf_token %}
        <div class="form-group">
          <label for="username_id">用户名</label>
          <input type="text" class="form-control" id="username_id" aria-describedby="emailHelp" maxlength="20">
          <small id="username_tip" class="form-text text-muted">请输入字母和中文组成的名称1-20</small>
        </div>
        <div class="form-group">
          <label for="password_id">密码</label>
          <input type="password" class="form-control" id="password_id" maxlength="20">
        </div>
        <div class="form-group">
          <label for="confire_password_id">验证码</label>
          <img src="{% url 'varify_code'%}" id='code_image_id' alt="验证码" onclick="this.src='/varify/code/?'+Math.random();">
          <input type="text" class="form-control" id="code_id">
        </div>
        <div class="form-group form-check">
          <input type="checkbox" class="form-check-input" id="remember">
          <label class="form-check-label" for="remember">记住用户名</label>
        </div>
      </form>
      <button type="button" class="btn btn-primary btn-block" onclick="submit()">一键登录</button>
      <p style="margin-top: 20px;">
        <span style="font-size: 12px;">第三方登录：</span>
        <span class="btn" onclick="qqLogin()"><img src="{% static 'images/qq_login2.png'%}" alt="qq登录" title="QQ登录"></span>
        {%csrf_token%}
      </p>
    </div>
    <div class="col-sm">
    </div>
</div> 
<div class='row'>
  <div class="col-sm">
  </div>
</div>
<!-- <script type="text/javascript" src="//connect.qq.com/qc_jssdk.js" charset="utf-8" data-callback="true"></script>
<script type="text/javascript">
  QC.Login({
    btnId:"qqLoginBtn"	//插入按钮的节点id
});
</script>
<script type="text/javascript"  charset="utf-8"
    src="http://connect.qq.com/qc_jssdk.js"
    data-appid="APPID"
    data-redirecturi="REDIRECTURI"
></script> -->

  <script type="text/javascript">
    $(function(){
      if (getCookie('username')){
        let username = $.parseJSON(getCookie('username'));
        username = unescape(username.toString().replace(/\"/gi,"").replace(/\\u/gi, '%u'))
        $("#username_id").val(username)
      }
    })
// qq登录   
  function toLogin()
  {
    //以下为按钮点击事件的逻辑。注意这里要重新打开窗口
    //否则后面跳转到QQ登录，授权页面时会直接缩小当前浏览器的窗口，而不是打开新窗口
    var A=window.open("oauth/index.php","TencentLogin",
          "width=450,height=320,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");
  }
  // 提交信息
  function submit(){
    var username = $("#username_id").val();
    var pwd = $("#password_id").val();
    var csrfToken = $("[name='csrfmiddlewaretoken']").val();
    var code = $("#code_id").val();
    var remember = $("#remember")[0].checked;
    if(!code){
      $('#model_tip').modal('show');
      $('#model_title').text('错误提示');
      $('#model_content').text('验证码不能为空');
    }
    else{
      data = JSON.stringify({
        'username':username,
        'pwd':pwd,
        'code':code
      });
      $.ajax({
          type:"POST",
          url:'/user/login/', 
          contentType:"application/json",
          dataType:"json",
          data:data,
          headers:{
            'X-CSRFToken':csrfToken
          },
          success:function(data){
            if(data['result']==1){
              $('#model_tip').modal('show');
              $('#model_title').text('成功提示');
              $('#model_content').text(data['msg']);
                if(remember){
                    Setcookie('username',username)
                }
                window.location='/'
            }else{
              $('#model_tip').modal('show');
              $('#model_title').text('错误提示');
              $('#model_content').text(data['msg']);
            }
          },
          error:function(XMLHttpRequest, textStatus, errorThrown){
            $('#model_tip').modal('show');
            $('#model_title').text('错误提示');
            $('#model_content').text(errorThrown);
          }
        })
      $('#code_image_id').attr('src','/varify/code/?'+Math.random());
      }
    
  }
</script>
{% endblock content %}